import React from 'react';
import styled from 'styled-components';
import {textEllipsis} from '../../../theme';

export const InfoBoxStyle = styled.div<{
  row?: number;
  rowSpan?: number;
  col?: number;
  colSpan?: number;
  height?: string;
  margin?: string;
}>`
  background: white;
  border-radius: 5px;
  margin: ${({margin}) => margin || '20px'};
  width: calc(100% - 40px);
  height: ${({height}) => height || 'calc(100% - 40px)'};
  grid-row: ${({row, rowSpan}) => (row || 'auto') + '/ span ' + (rowSpan || 1)};
  grid-column: ${({col, colSpan}) =>
    (col || 'auto') + '/ span ' + (colSpan || 1)};
`;
export const Title = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 0 25px;
  position: relative;
  line-height: 54px;
  color: #2f323e;
  font-weight: bold;
  font-size: 20px;
  ${textEllipsis};
  &::after {
    position: absolute;
    content: '';
    height: 1px;
    bottom: 0;
    width: calc(100% - 50px);
    background-color: #f3f6f7;
  }
`;

export const Content = styled.div`
  height: calc(100% - 54px);
  display: flex;
  align-items: center;
`;

type Props = {
  title?: string;
  rightTitle?: React.ReactNode;
  children?: React.ReactNode;
  row?: number;
  rowSpan?: number;
  col?: number;
  colSpan?: number;
  height?: string;
  margin?: string;
};

function InfoBox({title, rightTitle, children, ...gridRestAttr}: Props) {
  return (
    <InfoBoxStyle {...gridRestAttr}>
      <Title title={title}>
        <span>{title}</span>
        {rightTitle}
      </Title>
      <Content>{children}</Content>
    </InfoBoxStyle>
  );
}

export default InfoBox;
